<template>
  <el-dialog title="添加文档" :visible.sync="visible">
    <el-upload
      action="#"
      :auto-upload="false"
      :on-change="handleFileChange">
      <el-button>选择文件</el-button>
    </el-upload>
    <span slot="footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['visible'],
  methods: {
    handleFileChange(file) {
      const reader = new FileReader()
      reader.onload = e => {
        const docs = JSON.parse(localStorage.getItem('docs')) || []
        docs.push({
          name: file.name,
          content: e.target.result
        })
        localStorage.setItem('docs', JSON.stringify(docs))
        this.$emit('update:visible', false)
        this.$emit('added')
      }
      reader.readAsText(file.raw)
    }
  }
}
</script>